<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <style>
        input {
            height: 30px;
            width: 420px;
        }

        button {
            margin-top: 10px;
            padding: 10px 15px;
            cursor: pointer;
        }
    </style>
</head>

<body>

    <div class="form">
        <div><input type="text" placeholder="手机号码"></div>
        <div><button class="btn-send">发送验证码</button></div>
    </div>

    <script>
        var btnSend = document.querySelector(".btn-send");
        var input_1 = document.querySelector("input[type='text']");
        // console.log(input_1);

        var handle = function () {
            console.log("click");
            var res = input_1.value;
            // console.log(res);
            if (res.length < 11) {
                alert("请输入11位的手机号");
            } else {
                delay = setTimeout(function () {
                    var num = Math.floor(Math.random() * 999999);
                    alert("您的验证码"+num);
                    // var input_2 = document.createElement("div");
                    btnSend.onclick = handle;
                    btnSend.innerText = "重新发送验证码";
                    btnSend.style["cursor"] = "pointer";
                    btnSend.removeAttribute("disabled");
                 }, 3 * 1000);

                btnSend.onclick = null;
                btnSend.innerText = "发送中...";
                btnSend.style["cursor"] = "not-allowed";
                btnSend.setAttribute("disabled", true);
                input_1.value = "";
                
                // console.log(num);
                
                
            }

        }

        btnSend.onclick = handle;
    </script>
</body>

</html>